<template>
  <div class="permission-container">
    <div class="pc-btn">
      <el-button type="primary" size="mini" @click="addPermissionTmp(1, 0)">添加权限</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="标识"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.type === 1" type="text" size="small" @click="addPermissionTmp(2, scope.row.id)">添加</el-button>
            <el-button type="text" size="small" @click="eidtPermissionTmp(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delPermissionTmp(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 这里就不封装 弹出框组件 -->
    <el-dialog :title="isEdit ? '编辑权限' : '新增权限'" :visible.sync="showDialog" :append-to-body="true" @close="close">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="权限名称" label-width="150px" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限标识" label-width="150px" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="权限描述" label-width="150px" prop="description">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="开启" label-width="150px">
          <el-switch
            v-model="form.enVisible"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label-width="150px">
          <el-button type="primary" @click="submitForm">{{ isEdit ? '更新' : '新增' }}</el-button>
          <el-button @click="close">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionRequest, addPermissionRequest, deletePermissionRequest, getPermissionDetailRequest, updatePermissionRequest } from '@/api/permission'
import { transformListToTree } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      tableData: [],
      showDialog: false,
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        // 页面权限 1 按钮权限 2 ---- 用户按得什么按钮，就手动把这个是改成1和2
        type: null,
        pid: null
      },
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ]
      },
      // 当前状态是否是编辑状态， true表示编辑， false表示 新增
      isEdit: false
    }
  },
  // 发请求是在created还是mounted里面发？
  created() {
    this.getPermissionList()
  },
  mounted() {
    // 初始化请求一般放在cerated，用慢网测试看效果不明显
    // creatd dom还没有准备好，初始数据，和修改数据不影响页面，
    // 在mounted里面，dom已经渲染好了一遍，等接口返回了，（如果dom刚刚准备好，请求就返回了，那这里就会闪以下屏幕）
    // this.getPermissionList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // rowIndex % 2 1 0   0表示假 false
      // rowIndex % 2 === 1
      if (rowIndex % 2) {
        // 奇数行
        return 'warning-row'
      } else {
        return 'success-row'
      }
      // return ''
    },
    async getPermissionList() {
      const res = await getPermissionRequest()
      console.log(res)
      this.tableData = transformListToTree(res.data, 0)
    },
    addPermissionTmp(type, id) {
      // 因为这个函数是点击新增按钮的时候，触发的函数，所有变量 isEdit是false
      this.isEdit = false
      // 如果type===1 就是添加 页面权限
      // 如果type===2 就是添加 按钮级别权限
      this.showDialog = true
      this.form.type = type
      this.form.pid = id
    },
    async eidtPermissionTmp(id) {
      this.isEdit = true
      this.showDialog = true

      const res = await getPermissionDetailRequest(id)
      this.form = res.data
    },
    close() {
      this.showDialog = false
      this.isEdit = false
      this.$refs.ruleForm.resetFields()
      this.form = this.$options.data().form
    },
    // 新增和编辑都会执行这个函数
    submitForm() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          if (this.isEdit) {
            await updatePermissionRequest(this.form)
          } else {
            await addPermissionRequest(this.form)
            // 所有校验通过以后，执行的代码

            // 新增成功以后： 关闭弹窗(情况校验和数据) + 友好提示 + 刷新页面
          }
          this.close()
          this.$message.success({ message: '新增权限成功' })
          this.getPermissionList()
        }
      })
    },
    delPermissionTmp(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePermissionRequest(id)

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPermissionList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<style lang="scss" scoped>
.permission-container {
  margin: 20px;
  .pc-btn {
    margin-bottom: 20px;
  }
}
</style>
